/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react';
import { info } from '../utils/color';

export default class Detali extends Component {
    constructor () {
        super();
        this.state = {
            showObj: {},
            cleckList: [],
            colorList: [],
            sizeList: [],
            colorid: 1,
            sizeid: 1,
            list: [
                {
                    id: 1,
                    colorname: "粉色",
                    colorid: 1,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
                    sizename: "大",
                    sizeid: 1,
                    price: 100,
                    num: 0,
                },
                {
                    id: 2,
                    colorname: "粉色",
                    colorid: 1,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-1.png",
                    sizename: "小",
                    sizeid: 2,
                    price: 200,
                    num: 20,
                },
                {
                    id: 3,
                    colorname: "黄色",
                    colorid: 2,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-2.png",
                    sizename: "大",
                    sizeid: 1,
                    price: 10,
                    num: 1,
                },
                {
                    id: 4,
                    colorname: "黄色",
                    colorid: 2,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-2.png",
                    sizename: "小",
                    sizeid: 2,
                    price: 20,
                    num: 0,
                },
                {
                    id: 5,
                    colorname: "蓝色",
                    colorid: 3,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-3.png",
                    sizename: "大",
                    sizeid: 1,
                    price: 30,
                    num: 3,
                },
                {
                    id: 6,
                    colorname: "蓝色",
                    colorid: 3,
                    img: "https://b.yzcdn.cn/vant/sku/shoes-3.png",
                    sizename: "小",
                    sizeid: 2,
                    price: 40,
                    num: 4,
                },
            ],
        };
    }
    componentDidMount() {//页面结构加载完成的生命周期
        //用于页面结构加载
        let colorList = Array.from(new Set(this.state.list.map(item => item.colorid))).map(colorid => {
            let info = this.state.list.filter(item => item.colorid === colorid)[0]
            return {
                colorid,
                colorname: info.colorname,
                img: info.img
            }

        })
        let sizeList = Array.from(new Set(this.state.list.map(item => item.sizeid))).map(sizeid => {
            let info = this.state.list.filter(item => item.sizeid === sizeid)[0]
            return {
                sizeid,
                sizename: info.sizename
            }
        })

        this.setState({
            colorList,
            sizeList,
            showObj: this.state.list.filter(item => item.num !== 0)[0],
            sizeid: this.state.list.filter(item => item.num !== 0)[0].sizeid,
            colorid: this.state.list.filter(item => item.num !== 0)[0].colorid
        })
    }
    setShowObj(id, idType) {
        this.setState({
            [idType]: id
        }, () => {
            this.setState({
                cleckList: this.state.list.filter(item => item[idType] === this.state[idType] && item.num !== 0),
            }, () => {
                this.setState({
                    showObj: this.state.cleckList.filter(item => item.colorid === this.state.colorid && item.sizeid === this.state.sizeid)[0]
                })
            })
        })
    }

    render() {
        return (
            <div>
                <div>
                    <div title='信息' style={{ display: 'flex', flexDirection: 'column' }}>
                        <div>
                            <img src={this.state.showObj.img} />
                        </div>
                        <div>
                            数量：<span>{this.state.showObj.num}</span>
                            单价：<span>{this.state.showObj.price}</span>
                        </div>
                    </div>
                </div>
                <div>
                    <div>颜色:</div>
                    {this.state.colorList.map(item => (
                        <button
                            key={item.colorid}
                            style={{ margin: '5px', width: '60px', backgroundColor: info[item.colorname] }}
                            className={item.colorid === this.state.colorid ? 'error' : ''}
                            onClick={() => { this.setShowObj(item.colorid, 'colorid') }}
                            disabled={!this.state.list.filter(check => check.colorid === item.colorid && check.sizeid === this.state.sizeid && check.num !== 0).length}
                        >
                            {item.colorname}
                        </button>
                    ))}
                </div>
                <div>
                    <div>尺码:</div>
                    {this.state.sizeList.map(item => (
                        <button
                            key={item.sizeid}
                            style={{ margin: '5px', width: '25px' }}
                            className={item.sizeid === this.state.sizeid ? 'error' : ''}
                            onClick={() => { this.setShowObj(item.sizeid, 'sizeid') }}
                            disabled={!this.state.list.filter(check => check.sizeid === item.sizeid && check.colorid === this.state.colorid && check.num !== 0).length}
                        >{item.sizename}</button>
                    ))}
                </div>
            </div>
        )
    }
}
